import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Window 2.15

ApplicationWindow {
    width: 800
    height: 600
    visible: true
    title: qsTr("绘图设备示例 Image & ShaderEffect")

    Column {
        anchors.centerIn: parent
        anchors.margins: 10
        spacing: 15

        GroupBox {
            title: qsTr("Image")

            Row {
                spacing: 10
                padding: 5

                Image {
                    id: localImage

                    width: 100
                    height: 100
                    source: "qrc:images/honghong.jpeg"
                    fillMode: Image.PreserveAspectFit
                    mipmap: true
                    onStatusChanged: {
                        if (status === Image.Ready)
                            console.log("本地图片加载成功，宽度：" + localImage.width + " 高度：" + localImage.height);
                        else if (status === Image.Error)
                            console.log("本地图片加载失败");
                    }
                }

                Image {
                    id: networkImage

                    width: 100
                    height: 100
                    source: "https://gitee.com/z2687745979/image-hosting/raw/master/img/20251118192628218.png"
                    fillMode: Image.PreserveAspectFit
                    asynchronous: true

                    Rectangle {
                        anchors.fill: parent
                        color: "lightblue"
                        visible: networkImage.status === Image.Loading

                        Text {
                            anchors.centerIn: parent
                            text: "加载中..."
                        }

                    }

                }

                Image {
                    id: dynamicImage

                    width: 200
                    height: 200
                    source: "qrc:images/hong.jpg"
                    // source: "qrc:images/hong.png"
                    // source: "qrc:images/honghong1.jpeg"
                    fillMode: Image.PreserveAspectFit

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            dynamicImage.rotation += 90;
                            console.log("动态图片旋转了 90 度，当前旋转角度：" + dynamicImage.rotation % 360);
                        }
                    }

                }

                Image {
                    id: croppedImage

                    width: 100
                    height: 100
                    source: "qrc:images/hong_1.jpg"
                    sourceSize: Qt.size(80, 80)
                    fillMode: Image.PreserveAspectFit
                    clip: true
                }

            }

        }

        // ShaderEffect 简化示例
        GroupBox {
            title: "ShaderEffect - GPU 加速特效"
            width: parent.width
            height: 180

            Row {
                spacing: 15
                padding: 5
                anchors.horizontalCenter: parent.horizontalCenter

                // 1. 简单颜色反转
                ShaderEffect {
                    id: invertEffect
                    width: 120
                    height: 120
                    property variant source: Image {
                        source: "qrc:/images/tree.png"
                        sourceSize: Qt.size(120, 120)
                    }
                    property bool inverted: false

                    fragmentShader: "
                        varying highp vec2 qt_TexCoord0;
                        uniform sampler2D source;
                        uniform lowp float qt_Opacity;
                        uniform bool inverted;

                        void main() {
                            lowp vec4 color = texture2D(source, qt_TexCoord0);
                            if (inverted) {
                                color = vec4(1.0 - color.r, 1.0 - color.g, 1.0 - color.b, color.a);
                            }
                            gl_FragColor = color * qt_Opacity;
                        }"

                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            invertEffect.inverted = !invertEffect.inverted
                            console.log("颜色反转: " + invertEffect.inverted)
                        }
                    }
                }

                // 2. 灰度效果
                ShaderEffect {
                    id: grayscaleEffect
                    width: 120
                    height: 120
                    property variant source: Image {
                        source: "qrc:/images/tree.png"
                        sourceSize: Qt.size(120, 120)
                    }
                    property real grayscale: 0.0

                    fragmentShader: "
                        varying highp vec2 qt_TexCoord0;
                        uniform sampler2D source;
                        uniform lowp float qt_Opacity;
                        uniform highp float grayscale;

                        void main() {
                            lowp vec4 color = texture2D(source, qt_TexCoord0);
                            lowp float gray = dot(color.rgb, vec3(0.299, 0.587, 0.114));
                            color.rgb = mix(color.rgb, vec3(gray), grayscale);
                            gl_FragColor = color * qt_Opacity;
                        }"

                    Slider {
                        anchors.top: parent.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: parent.width
                        from: 0; to: 1; value: 0
                        onValueChanged: {
                            grayscaleEffect.grayscale = value
                            console.log("灰度程度: " + (value * 100).toFixed(0) + "%")
                        }
                    }
                }

                // 3. 简单模糊效果
                ShaderEffect {
                    id: blurEffect
                    width: 120
                    height: 120
                    property variant source: Image {
                        source: "qrc:/images/tree.png"
                        sourceSize: Qt.size(120, 120)
                    }
                    property real blur: 0.0

                    fragmentShader: "
                        varying highp vec2 qt_TexCoord0;
                        uniform sampler2D source;
                        uniform lowp float qt_Opacity;
                        uniform highp float blur;

                        void main() {
                            lowp vec4 color = texture2D(source, qt_TexCoord0);
                            // 简单模糊采样
                            if (blur > 0.0) {
                                color += texture2D(source, qt_TexCoord0 + vec2(blur * 0.003, 0.0));
                                color += texture2D(source, qt_TexCoord0 - vec2(blur * 0.003, 0.0));
                                color += texture2D(source, qt_TexCoord0 + vec2(0.0, blur * 0.003));
                                color += texture2D(source, qt_TexCoord0 - vec2(0.0, blur * 0.003));
                                color /= 5.0;
                            }
                            gl_FragColor = color * qt_Opacity;
                        }"

                    Slider {
                        anchors.top: parent.bottom
                        anchors.horizontalCenter: parent.horizontalCenter
                        width: parent.width
                        from: 0; to: 10; value: 0
                        onValueChanged: {
                            blurEffect.blur = value
                            console.log("模糊程度: " + value.toFixed(0)) 
                        }
                    }
                }
            }
        }

        // 状态显示
        Text {
            id: statusText
            width: parent.width
            text: "就绪 - 点击图片或拖动滑块查看效果"
            color: "gray"
            horizontalAlignment: Text.AlignHCenter
        }
    }
}

